<template>
    <div class="comment">
        <div class="user-avator">
            <img :src="comment.user.avatarUrl" alt="">
        </div>

        <div class="user-right">
            <div class="user">
                <div class="name-box">
                    <div class="user-name">
                        {{ comment.user.nickname }}
                        <div class="s-vip"></div>
                    </div>
                    <div class="time">{{ comment.timeStr }}</div>
                </div>
                <div class="agreement">
                    {{ comment.likedCount }}
                    <i class="icon-agreement iconfont icon-dianzan"></i>
                </div>
            </div>

            <div class="content">
                <p><span v-if="comment?.beReplied[0]?.user"><span>回复</span><span class="re-user">{{ '@' +
                        comment?.beReplied[0]?.user?.nickname
                }}: </span></span> {{ comment.content }}</p>
                <div class="replied" :class="{ 're-border': comment?.beReplied[0]?.user }">
                    <span v-for="(item, i) in comment?.beReplied" :key="i">@{{ item?.user?.nickname }}: {{ item?.content
                    }}</span>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    props: ['comment'],

    data() {
        return {

        }
    },

    components: {},

    computed: {

    },

    methods: {}
}
</script>
<style lang='scss' scoped>
.comment {
    display: flex;
    padding-top: 10px;

    .user-avator {
        margin: 0 10px;

        img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }
    }

    .user-right {
        flex: 1;
        padding: 0 10px 11px 0;
        border-bottom: 1px solid #ddd;

        .user {
            display: flex;
            font-size: 12px;
            color: #999;

            .name-box {
                flex: 1;

                .user-name {
                    color: #666;
                    font-size: 14px;

                    .s-vip {
                        width: 32px;
                        margin: 0 4px;
                    }
                }
            }


            .time {
                font-size: 12px;
            }

            .agreement {
                width: 45px;
                text-align: end;
            }
        }

        .content {
            margin-top: 5px;
            font-size: 15px;
            color: #333;

            .replied {
                display: none;
                margin: 5px 0;
                padding: 10px;
                color: #888;
                font-size: 14px;
            }

            & .re-border {
                display: block;
                border: 1px solid #ddd;
            }

            .re-user {
                color: #507daf;
            }
        }
    }
}
</style>